<template>
  <div class="send">
    <!-- 用于发送评论的组件：分为两种情况 -->
    <!-- 优化：反复切换建议使用 v-show -->
    <!-- 情况1：输入框状态 -->
    <div
      class="case_input"
      v-show="!isShowTextarea"
    >
      <input
        type="text"
        class="input"
        placeholder="写跟帖"
        :value="content"
        @focus="showTextAreaHandle"
      >
      <span class="icon_group">
        <i class="iconfont iconpinglun-"></i>
        <span class="icon_group_num">102</span>
      </span>
      <i class="iconfont iconshoucang"></i>
      <i class="iconfont iconfenxiang"></i>
    </div>
    <!-- 情况2：文本域状态 -->
    <div
      class="case_textarea"
      v-show="isShowTextarea"
    >
      <textarea
        class="textarea"
        placeholder="回复:"
        ref="textarea_dom"
        v-model="content"
        @blur="hideTextAreaHandle"
      ></textarea>
      <span
        class="send_btn"
        @click="sendCommentHandle"
      >发送</span>
    </div>
  </div>
</template>

<script>
// 导入事件总线
import Bus from "@/utils/Bus.js";
// 导入发布评论的接口
import { addPostComment } from "@/api";
export default {
  data() {
    return {
      // 准备一个变量，用于切换两种状态的
      isShowTextarea: false,
      // 文本域的评论内容
      content: "",
      parent_id: "",
    };
  },
  // 接收父组件传递过来的文章 id
  props: ["detailId"],
  // 发布评论组件创建时，绑定事件
  created() {
    // 事件绑定三要素：
    //  1. 事件源         Bus
    //  2. 事件类型       sendComment
    //  3. 事件处理函数   ()=>{}
    //   $emit()  触发事件 -> 传递参数
    //   $on()    绑定事件 -> 获取参数(形参获取)
    Bus.$on("sendComment", (id) => {
      console.log("触发了事件总线上的事件🧨，获取到了", id);
      // 把事件总线接收到的 id 存到组件的 data 中，用于后续点击发送按钮的参数
      this.parent_id = id;
      // 显示 textarea 文本域
      // this.isShowTextarea = true;
      this.showTextAreaHandle();
    });
  },
  methods: {
    // 显示文本域的事件处理函数
    showTextAreaHandle() {
      this.isShowTextarea = true;
      // 通过 $refs 找到 textarea_dom 元素，调用文本域的获取焦点功能
      // console.log(this.$refs.textarea_dom);

      // 方案1：通过定时器，让获取焦点等等在执行
      // setTimeout(() => {
      //   // 不能对隐藏的元素获取焦点，需要等 Vue 视图更新完毕后，才能获取焦点
      //   this.$refs.textarea_dom.focus();
      // }, 50);

      // 方案2：将传入的回调函数延迟到下次 DOM 更新循环之后执行。
      this.$nextTick(() => {
        // 因为文本域要显示出来后，才能获取焦点
        this.$refs.textarea_dom.focus();
      });
    },
    // 隐藏文本域
    hideTextAreaHandle() {
      // 通过定时器延时执行隐藏文本域，防止发送按钮无法触发点击事件的BUG
      setTimeout(() => {
        this.isShowTextarea = false;
        // 隐藏文本域的时候，清空 parent_id, 变成回复文章
        this.parent_id = "";
      }, 50);
    },
    // 点击发送按钮 - 发送评论
    // BUG：点击按钮之前，其实先触发了 文本域的失去焦点事件，按钮就被隐藏起来了，点不到了
    sendCommentHandle() {
      console.log("你点击了发送评论按钮");
      // 调用 api 中封装的添加评论接口
      addPostComment({
        // 文章id：注意需要通过父传子传递过来
        id: this.detailId,
        // 评论内容：从文本域中获取
        content: this.content,
        // 回复id
        parent_id: this.parent_id,
      }).then((res) => {
        // console.log(res);
        // 发送评论成功，给用户一个轻提示
        this.$toast(res.data.message);
        // 体验优化：回复成功后，清空文本域内容
        this.content = "";
        // 触发父组件的一个自定义事件，自定义事件调用获取评论数据的函数即可
        this.$emit("updataComment");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.send {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2f2f2;
  // 情况1：输入框状态
  .case_input {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    .input {
      width: 180px;
      height: 30px;
      border-radius: 15px;
      background-color: #d7d7d7;
      border: none;
      padding: 0 10px;
    }
    .iconfont {
      font-size: 25px;
    }
    .icon_group {
      position: relative;
      .icon_group_num {
        position: absolute;
        right: -10px;
        top: -5px;
        background-color: red;
        color: #fff;
        padding: 1px 3px;
        font-size: 12px;
        border-radius: 100px;
      }
    }
  }
  // 情况2：文本域状态
  .case_textarea {
    padding: 10px;
    display: flex;
    // 侧轴底部对齐
    align-items: flex-end;
    .textarea {
      flex: 1;
      height: 80px;
      border-radius: 5px;
      background-color: #d7d7d7;
      border: none;
      padding: 10px;
    }
    .send_btn {
      margin-left: 10px;
      width: 60px;
      height: 26px;
      background-color: red;
      border-radius: 13px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
    }
  }
}
</style>